<template>
  <div id="detail">
    <div class="total_grade">
      <h1 class="total_grade_title">总战绩</h1>
      <div class="total_grade_conten">
        <p>
          <span>总局数</span>
          <span>123456</span>
        </p>
        <div class="total_chart">
          <div class="chart_pie" ref="pie">
          </div>
          <div class="chart_desc">
            <span>胜率</span>
            <span>48%</span>
          </div>
        </div>
      </div>
    </div>
    <div class="grade">
      <h1>麻将战绩</h1>
      <ul class="table">
        <li>对局数</li>
        <li>胜</li>
        <li>平</li>
        <li>负</li>
        <li>胜率</li>
        <li>最大得分</li>
      </ul>
      <ul class="table table_grade">
        <li v-for="item in mahjongData" :key="item">{{item}}</li>
      </ul>
      <router-link class="detail" to="gradeDetail"></router-link>
    </div>
    <div class="grade">
      <h1>扑克战绩</h1>
      <ul class="table">
        <li>对局数</li>
        <li>胜</li>
        <li>平</li>
        <li>负</li>
        <li>胜率</li>
        <li>最大得分</li>
      </ul>
      <ul class="table table_grade">
        <li v-for="item in mahjongData" :key="item">{{item}}</li>
      </ul>
      <span class="detail"></span>
    </div>
    <div class="line" ref="line"></div>
  </div>
</template>


<script>
// import Line from "echarts/lib/chart/line";
import echarts from "echarts";
export default {
  data() {
    return {
      pieData: [
        {
          value: 48,
          itemStyle: {
            normal: {
              color: "#9cffa1"
            }
          }
        },
        {
          value: 52
        }
      ],
      mahjongData: [31213, 312313, 3123131, 312313, "59%", 888],
      pokerData: [31213, 312313, 3123131, 312313, "59%", 888]
    };
  },
  mounted() {
    this.drawPieChart();
    this.drawLineChart();
  },
  methods: {
    drawPieChart() {
      var myChart = echarts.init(this.$refs.pie);
      // 绘制图表
      myChart.setOption({
        series: [
          {
            name: "总战绩",
            radius: ["55%", "70%"],
            avoidLabelOverlap: false,
            clockwise: false,
            itemStyle: {
              normal: {
                color: "#fff"
              }
            },
            type: "pie",
            data: this.pieData,
            hoverAnimation: false,
            label: {
              normal: {
                show: false,
                position: "center"
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: "30",
                  fontWeight: "bold"
                }
              }
            }
          }
        ]
      });
      window.addEventListener("resize", function() {
        setTimeout(function() {
          myChart.resize();
        }, 500);
      });
    },
    drawLineChart() {
      var myChart = echarts.init(this.$refs.line);
      // 绘制图表
      myChart.setOption({
        title: {
          text: "每日累计得分",
          textStyle: {
            color: "#fff",
            fontSize: "16"
          },
          left: "center"
        },
        tooltip: {},
        xAxis: {
          typ: "category",
          boundaryGap: 0,
          position: "top",
          axisLine: {
            show: false
          },
          axisLabel: {
            color: "#fff"
          },
          axisTick: {
            show: false
          },
          data: [1, 2, 3, 4, 5, 6, 7]
        },
        yAxis: {
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            color: "#fff"
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: "dotted"
            }
          }
        },
        series: [
          {
            name: "销量",
            type: "line",
            lineStyle: {
              normal: {
                color: "#fff",
                width: 1
              }
            },
            areaStyle: {
              normal: {
                color: "rgba(128, 128, 128, 0.5)"
              }
            },
            data: [5, 20, 36, 10, 10, 20, 88]
          }
        ]
      });
    }
  }
};
</script>



<style scoped>
#detail {
  background: url("../images/commonProblem.png") no-repeat;
  background-size: 100% 100%;
  color: #fff;
  padding: 0.3rem 0.14rem 0;
  text-align: center;
}

.total_grade,
.grade {
  background: url("../images/title_bg.png") center top no-repeat;
  background-color: #001523;
  background-size: 2.27rem 0.4rem;
  border-radius: 0.1rem;
  box-shadow: 0 0 0.2rem #1c5d86;
}

.total_grade_title {
  font-size: 0.3rem;
}

.total_grade_conten {
  display: flex;
  justify-content: space-around;
}

.total_grade_conten p {
  display: flex;
  flex-basis: 0;
  flex-grow: 1;
  flex-direction: column;
  font-size: 0.24rem;
  margin-top: 0.34rem;
}

.total_grade_conten p span:nth-of-type(2) {
  color: #9cffa1;
  margin-top: 0.22rem;
  margin-bottom: 0.7rem;
}

.total_chart {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-basis: 0;
  flex-grow: 1;
  position: relative;
}

.chart_pie {
  height: 100%;
  width: 100%;
}

.chart_desc {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.chart_desc span:nth-of-type(2) {
  color: #9cffa1;
}

.table {
  display: flex;
}

.table li {
  border: 2px solid #062d49;
  border-right-width: 0;
  flex-basis: 0;
  flex-grow: 1;
  padding: 0.2rem 0;
}
.table li:first-child {
  border-left-width: 0;
}
.table_grade li {
  border-top-width: 0;
}

.grade {
  margin-top: 0.22rem;
  position: relative;
}

.grade h1 {
  font-size: 0.3rem;
  height: 0.4rem;
  line-height: 0.4rem;
}

.detail {
  background: url("../images/more_bg.png") no-repeat;
  background-size: cover;
  height: 0.4rem;
  position: absolute;
  right: 0;
  top: 0;
  width: 0.84rem;
}

.line {
  height: 4.2rem;
  width: 100%;
  margin-top: 0.5rem;
}
</style>
